<template>
  <div>
  <Col span="24" class="flex-inline">
    <span class="title">媒体类型:</span>
    <Tabs class="tagsList" v-model="currentMedia" @on-click="getCurrentMedia">
      <TabPane class="tagItem" v-for="(item,index) in queryTypeData.mediaTypeName"  :label="item" :name="item" :key="index" ></TabPane>
    </Tabs>
  </Col>
  <Col span="24" class="flex-inline">
    <span class="title">科技分类:</span>
    <Tabs class="tagsList" v-model="currentTag" @on-click="getCurrentTag">
      <TabPane class="tagItem" v-for="(item,index) in queryTypeData.tags"  :label="item" :name="item" :key="index" ></TabPane>
    </Tabs>
  </Col>
  <Col span="24" class="flex-inline">
    <span class="title">区域选择:</span>
    <Tabs class="tagsList" v-model="currentRegion" @on-click="getCurrentRegion">
      <TabPane class="tagItem" v-for="(item,index) in queryTypeData.regions"  :label="item" :name="item" :key="index" ></TabPane>
    </Tabs>
  </Col>
  <Col span="24" class="flex-inline">
    <span class="title">专题分类:</span>
    <Tabs class="tagsList" v-model="currentTopic" @on-click="getCurrentTopic">
      <TabPane class="tagItem" v-for="(item,index) in queryTypeData.topics"  :label="item" :name="item" :key="index"></TabPane>
    </Tabs>
  </Col>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "QueryType",
      data(){
          return{
                currentMedia:"",
                currentTag:"",
                currentRegion:"",
                currentTopic:"",
                queryTypeData:{}
          }
      },
      methods:{
          getTypeData(){
            let url=this.$url.baseUrl+'/consulting-library/api/news/condition'
            this.$http.get(url).then(response =>{
              let result=response.data
              if (result.meta.success){
                // console.log(result.data)
                this.queryTypeData=result.data
                for (let i in this.queryTypeData){
                  this.queryTypeData[i].unshift('全部')
                }
              }
            })
          },
        getCurrentMedia(name){
            if(name=="全部"){name=""}
            this.currentMedia=name
        },
        getCurrentTag(name){
          if(name=="全部"){name=""}
          this.currentTag=name
        },
        getCurrentRegion(name){
          if(name=="全部"){name=""}
          this.currentRegion=name
        },
        getCurrentTopic(name){
          if(name=="全部"){name=""}
          this.currentTopic=name
        },

      },
      mounted(){
        this.getTypeData()
        this.getCurrentMedia(this.currentMedia)
        this.getCurrentTag(this.currentTag)
        this.getCurrentRegion(this.currentRegion)
        this.getCurrentTopic(this.currentTopic)
      },
      watch:{
        currentMedia(){
          this.getCurrentMedia(this.currentMedia)
        },
        currentTag(){
          this.getCurrentTag(this.currentTag)
        },
        currentRegion(){
          this.getCurrentRegion(this.currentRegion)
        },
        currentTopic(){
          this.getCurrentTopic(this.currentTopic)
        }
      }

    }
</script>

<style scoped>

</style>
